<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>账号管理</title>
		<style type="text/css">
			@font-face {
				font-family: 'iconfont';
				src: url('../../static/css/font/iconfont.eot');
				src: url('../../static/css/font/iconfont.eot?#iefix') format('embedded-opentype'), url('../../static/css/font/iconfont.woff2') format('woff2'), url('../../static/css/font/iconfont.woff') format('woff'), url('../../static/css/font/iconfont.ttf') format('truetype'), url('../../static/css/font/iconfont.svg#iconfont') format('svg');
			}
			
			.iconfont {
				font-family: "iconfont" !important;
				font-size: 16px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
		</style>
		<link rel="stylesheet" href="../../static/css/accountManagement.css" />
		<script type="text/javascript" src="../../static/js/jquery-3.1.0.js"></script>
		<script type="text/javascript" src="../../static/js/accountManagement.js"></script>
	</head>

	<body style="min-height: 848px;">

		<div id="content" class="content">
			<!--账号管理头部-->
			<div id="header-top" class="headWrap">
				<!--商标-->
				<a class="headLogo">
					<i class="i_icon"></i>
				</a>
				<!--导航栏-->
				<ul class="headLeft">
					<!--魅族商城-->
					<li class="head-store">
						<a target="_blank">
							<i class="i_icon"></i>
						</a>
					</li>
					<!--产品-->
					<li class="head-products">
						<a target="_blank">
							<i class="i_icon"></i>
						</a>
					</li>
					<!--专卖店-->
					<li class="head-retail">
						<a target="_blank">
							<i class="i_icon"></i>
						</a>
					</li>
					<!--Flyme-->
					<li class="head-flyme">
						<a target="_blank">
							<i class="i_icon"></i>
						</a>
					</li>
					<!--服务-->
					<li class="head-services">
						<a target="_blank">
							<i class="i_icon"></i>
						</a>
					</li>
					<!--社区-->
					<li class="head-bbs">
						<a target="_blank">
							<i class="i_icon"></i>
						</a>
					</li>
				</ul>
				<!--个人退出 顶部的右边-->
				<div class="headRight">
					<span id="loginWrap">
						<a id="head-name" class="linkAGray" title="我的小可爱不可爱了" href="accountManagement.html">我的小可爱不可爱了</a>
						<span class="none" id="show-msg-pub">1</span>
					<span class="line_head">|</span>
					<a id="head-logout" class="linkAGray">退出</a>
					</span>
				</div>
			</div>
			<!--账号管理中部-->
			<div class="flymeContent">
				<div id="navWrap" class="navWrap">
					<ul class="nav">
						<li id="accountManage">
							<a class="linkABlue">
								账号管理
							</a>
							<div class="current"></div>
						</li>
						<li id="contact">
							<a class="linkAGray">魅币</a>
						</li>
					</ul>
				</div>
				<div class="clear"></div>
				<div class="topWrap">
					<!--头像-->
					<div class="top-leftWrap">
						<img id="userImg" src="../../static/img/3.jpg" />
						<a class="modifyIconTip modify" id="modifyIconTip">编辑头像</a>
						<a class="modifyIconTip-bg"></a>
					</div>
					<!--名称-->
					<div class="top-rightWrap">
						<div class="lineWrap nickname" id="nickNameTitle">
							<input readonly="readonly" id="nickName" title="我的小可爱不可爱了" value="我的小可爱不可爱了" >

							</input>
							<a class="pointer modify" id="nickNameEdite">
								<i class="i_icon"></i>
							</a>
						</div>
						<!--修改昵称-->
						<div id="nickNameCon" class="lineWrap modify_content nickNameCon">
							<!--不对表单的输入内容进行验证-->
							<form style="display:inline" novalidate="novalidate">
								<div class="lineWrap">
									<span class="error-one" style="color: red;font-size: 14px;margin-left: 20px;display: none;">请填写名称</span>
									<span class="error-one" style="color: red;font-size: 14px;margin-left: 20px;display: none;">昵称已存在</span>
								</div>
								<div class="clear"></div>
								<div class="edit">
									<a class="fullBtnBlue save_form fleft" id="editSave">保存</a>
									<a class="fullBtnGray cancel_form fleft" id="editCancel">取消</a>
								</div>
								<div class="clear"></div>
							</form>
						</div>
					</div>
					<!--设置账号-->
					<div class="lineWrap grayTip ftop" id="setUserNameWrap">
						<a id="setuserName" class="blue modify">设置 Flyme 账号</a>
					</div>
					<!--修改账号-->
					<div id="setaccount" class="modify_content">
						<form novalidate="novalidate" class="modify_contentMove">
							<div>
								<div class="normalInput">
									<input type="text" name="account" id="flyme" class="username" maxlength="32" placeholder="账号" />
									<span class="grayTip flymeSpan">@flyme.cn</span>
								</div>
								<span class="error-one" style="color: red;font-size: 14px;margin-left: 20px;display: none;">请填写账号</span>
								<span class="error-one" style="color: red;font-size: 14px;margin-left: 20px;display: none;">账号长度不对，需输入4-32位</span>
								<div class="clear"></div>
								<label class="flymeTip">账号保存后不可修改</label>

							</div>
							<div class="clear"></div>
							<div class="fBtnleft">
								<a class="fullBtnBlue save_form fleft" id="newSave">保存</a>
								<a class="fullBtnGray cancel_form fleft" id="newCancel">取消</a>
								<div class="clear"></div>
							</div>
						</form>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<!--账号安全-->
			<div class="mainWrap">
				<div class="titleWrap grayBorderB grayBorderTop">
					<div class="title-leftWrap">
						<span>账号安全</span>
					</div>
					<div class="title-rightWrap">
						<span>安全等级：</span>
						<span class="green" id="safeLevel">80</span>
						<a class="pointer" id="safeLevelTip">
							<i class="i_icon"></i>
						</a>
					</div>
					<div class="clear"></div>
				</div>
				<!--密码-->
				<div class="bodyWrap">
					<!--密码修改-->
					<div class="lineWrap pwdWrapTop" id="pwdWrap">
						<div class="item-right">
							<a class="linkABlue modify" id="modifyPassword">修改</a>
						</div>
						<div class="item-left">密码</div>
						<!--<div class="item-middle"></div>-->
						<div class="clear"></div>
					</div>
					<!--密码修改页面-->

				</div>
				<!--邮箱修改-->
				<div id="emailWrap" class="lineWrap">
					<div class="item-right">
						<a id="emailBind" class="linkABlue modify">绑定</a>
					</div>
					<div class="item-left">邮箱</div>
					<!--进行判断if 未绑定-->
					<div class="item-middle" id="email-item-middle2">
						<span class="bold">未绑定</span><br />
						<span class="grayTip">绑定后可通过邮箱找回密码</span>
					</div>
					<div class="clear"></div>
					<!--邮箱修改页面-->

				</div>
				<!--手机修改-->
				<div id="telWrap" class="lineWrap">
					<div class="item-right">
						<a id="editMobile" class="linkABlue modify">修改</a>
					</div>
					<div class="item-left">手机号码</div>
					<!--进行判断if 已验证手机-->
					<div class="item-middle" id="telModify">
						<span id="current_phone" class="bold">130****2658</span>
						<br />
						<span class="grayTip">已验证，可通过手机找回密码</span>
					</div>
					<!--手机修改页面-->

				</div>
				<!--密保问题-->
				<div id="questionWrap" class="lineWrap">
					<div class="item-left">密保问题</div>
					<div id="questionModifyTip" class="item-right">
						<a id="modifySafe" class="linkABlue modify">修改</a>
					</div>
					<div id="questionSettedTip" class="item-middle">
						<span id="tip" class="bold">已设置</span>
						<br />
						<span class="grayTip">可通过密保问题找回密码</span>
					</div>
					<!--密保修改页面-->

				</div>
			</div>
		</div>
		</div>
		<!--底部-->
		<div id="flymeFooter" class="footerWrap" style="top: 848px;">
			<div class="footerInner">
				<div class="footer-layer1">
					<!--底部导航栏-->
					<div class="footer-innerLink">
						<a title="关于魅族" target="_blank">关于魅族</a>
						<img src="../../static/img/space.gif" class="foot-line" />
						<a title="工作机会" target="_blank">工作机会</a>
						<img src="../../static/img/space.gif" class="foot-line" />
						<a title="联系我们" target="_blank">联系我们</a>
						<img src="../../static/img/space.gif" class="foot-line" />
						<a title="法律声明" target="_blank">法律声明</a>
						<img src="../../static/img/space.gif" class="foot-line" />
						<a title="常见问题" target="_blank">常见问题</a>
						<img src="../../static/img/space.gif" class="foot-line" />
						<div id="globalName" class="footer-language" title="简体中文">
							简体中文&nbsp;&nbsp;&nbsp;
							<div id="globalContainer" class="footer-language_menu" style="left: 508px; display: none;">
								<a id="i18n-link" title="English" class="ClobalItem">English</a>
							</div>
						</div>
					</div>
					<!--客服热线	-->
					<div class="footer-service">
						<span class="service-label">客服热线</span>
						<span class="service-num">400-788-3333</span>
						<a class="service-online" id="service-online" title="在线客服">在线客服</a>
					</div>
					<!--图标-->
					<div class="footer-outerLink">
						<a class="footer-sinaMblog" target="_blank">
							<i class="i_icon"></i>
						</a>
						<a class="footer-weChat" target="_blank" id="footer-weChat">
							<i class="i_icon"></i>
						</a>
						<a class="footer-qzone" target="_blank">
							<i class="i_icon"></i>
						</a>
					</div>
				</div>
				<div class="clear"></div>
				<div id="flymeCopyright" class="copyrightWrap">
					<div class="copyrightInner">
						<span>©2019 Meizu Telecom Equipment Co., Ltd. All rights reserved.</span>
						<a class="linkAGray" target="_blank">备案号: 粤ICP备13003602号-4</a>
						<a class="linkAGray" target="_blank">经营许可证编号: 粤B2-20130198</a>
						<a class="linkAGray" target="_blank">营业执照</a>
					</div>
				</div>
			</div>
		</div>
		<!--弹窗-->
		<div class="mzdialog" id="mzdialog1">
			<div class="alertDialog">
				<div class="alertDialogTitle">
					<label class="alertDialogTitleTip">提示</label>
					<a class="alertDialogClose ">
						<i class="i_iconOne"></i>
					</a>
				</div>
				<div class="alertDialogMain">
					<div class="alertDialogContent">设置密码+20，验证邮箱+20，绑定手机号+30，设置密保问题+30，账号安全等着你拿100满分哦</div>
				</div>
				<div class="alertDialogBtnField ">
					<a class="fullBtnBlue alertDialogSure" onclick="app()">确定</a>
				</div>
			</div>
		</div>
		<!--密码修改弹窗-->
		<div id="id01" class="modal">
			<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
			<form class="modal-content animate">
				<div class="setQuestion-titleWrap">
					<span>修改密码（验证密码）</span>
				</div>
				<div class="container">
					<label><b>账号</b></label>
					<input type="text" placeholder="请输入账号" name="name" required>

					<label><b>原密码</b></label>
					<input type="password" placeholder="请输入原始密码" name="password" required>

					<label><b>修改密码</b></label>
					<input type="password" placeholder="请输入重置密码" name="repeat-password" required>
					<input type="checkbox" checked="checked">记住我

					<div class="clearfix">
						<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">取消</button>
						<button type="submit" class="signupbtn">修改</button>
					</div>
				</div>
			</form>
		</div>
		<!--邮箱绑定弹窗-->
		<div id="id02" class="modal">
			<span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span>
			<form class="modal-content animate">
				<div class="setQuestion-titleWrap">
					<span>绑定邮箱（验证密码）</span>
				</div>
				<div class="container">
					<label><b>账号</b></label>
					<input type="text" placeholder="请输入账号" name="name" required>

					<label><b>密码</b></label>
					<input type="password" placeholder="请输入密码" name="password" required>

					<label><b>邮箱</b></label>
					<input type="password" placeholder="请输入邮箱" name="email" required>
					<input type="checkbox" checked="checked">记住我

					<div class="clearfix">
						<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">取消</button>
						<button type="submit" class="signupbtn">绑定</button>
					</div>
				</div>
			</form>
		</div>
		<!--手机号绑定弹窗-->
		<div id="id03" class="modal">
			<span onclick="document.getElementById('id03').style.display='none'" class="close" title="Close Modal">×</span>
			<form class="modal-content animate" >
				<div class="setQuestion-titleWrap">
					<span>绑定手机号（验证密码）</span>
				</div>
				<div class="container">
					<label><b>账号</b></label>
					<input type="text" placeholder="请输入账号" name="name" required>

					<label><b>密码</b></label>
					<input type="password" placeholder="请输入密码" name="password" required>

					<label><b>手机号</b></label>
					<input type="password" placeholder="请输入手机号" name="phone" required>
					<input type="checkbox" checked="checked">记住我

					<div class="clearfix">
						<button type="button" onclick="document.getElementById('id03').style.display='none'" class="cancelbtn">取消</button>
						<button type="submit" class="signupbtn">绑定</button>
					</div>
				</div>
			</form>
		</div>
		<div class="cover"></div>
	</body>
</html>